<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件和局部组件</title>
</head>
<body>

<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<div id="app2">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>

  //组件构造器
  let cpnConstructor1 = Vue.extend({
    template:`
    <div>
      <h2>全局组件</h2>
      <h3>全局组件</h3>
    </div>
    `
  });

  //组件构造器
  let cpnConstructor2 = Vue.extend({
    template:`
    <div>
      <h2>局部组件</h2>
      <h3>局部组件</h3>
    </div>
    `
  });

  //注册全局组件cpn1
  Vue.component('cpn1',cpnConstructor1);

  let app = new Vue({
    el: '#app',
    //注册局部组件cpn2
    components:{
      cpn2:cpnConstructor2
    }
  });

  let app2 = new Vue({
    el: '#app2',
  });
</script>

</body>
</html>